import { defineComponent } from 'vue';
import { BasicTable, FormSchema, useTable } from '/@/components/Table';
import { getStudyRoomListApi, deleteStudyRoomApi } from './service';
import ActionModal from './modules/ActionModal';
import { useModal } from '@/components/Modal';
import { createTableAction } from '/@/components/Table/src/hooks/createTableAction';
import { useMessage } from '/@/hooks/web/useMessage';
import dayjs from 'dayjs';
import { Tag } from 'ant-design-vue';
function getTableFormSchema(): FormSchema[] {
  return [
    {
      field: 'RoomName',
      label: '名称查询',
      component: 'Input',
      colProps: { span: 8 },
    },
    {
      field: 'Status',
      label: '状态筛选',
      component: 'Select',
      componentProps: {
        options: [
          { label: '全部', value: '' },
          { label: '开放', value: 'Open' },
          { label: '关闭', value: 'Closed' },
          { label: '维护', value: 'Maintenance' },
        ],
      },
      colProps: { span: 8 },
    },
  ];
}
export default defineComponent({
  name: 'StudyRoom',
  setup() {
    const {
      createMessage: { success },
    } = useMessage();
    const [registerTable, { reload }] = useTable({
      title: '自习室管理',
      api: getStudyRoomListApi,
      fetchSetting: {
        listField: 'data.records',
      },
      columns: [
        {
          title: '自习室名称',
          dataIndex: 'RoomName',
          width: 200,
          sorter: true,
        },
        {
          title: '座位数量',
          dataIndex: 'TotalSeats',
          width: 120,
          customRender: ({ text }) => `${text} 个`,
        },
        {
          title: '状态',
          dataIndex: 'Status',
          width: 100,
          customRender: ({ text }) => {
            const statusMap = {
              Open: { label: '开放', color: 'green' },
              Closed: { label: '关闭', color: 'red' },
              Maintenance: { label: '维护', color: 'orange' },
            };
            return <Tag color={statusMap[text].color}>{statusMap[text].label}</Tag>;
          },
        },
        {
          title: '创建时间',
          dataIndex: 'CreateTime',
          width: 180,
          customRender: ({ text }: any) => {
            return dayjs(text).format('YYYY-MM-DD HHH:mm:ss');
          },
        },
      ],
      showTableSetting: true,
      bordered: true,
      useSearchForm: true,
      formConfig: {
        labelWidth: 80,
        baseColProps: { span: 5 },
        schemas: getTableFormSchema(),
      },
      actionColumn: {
        width: 100,
        title: '操作',
        fixed: 'right',
        customRender: ({ record }) =>
          createTableAction([
            {
              label: '编辑',
              icon: 'ant-design:edit-outlined',
              onClick: () => {
                openModal(true, { record, type: 'edit' });
              },
            },
            {
              label: '删除',
              danger: true,
              icon: 'ant-design:delete-outlined',
              popConfirm: {
                title: '确定删除？',
                confirm: async () => {
                  await deleteStudyRoomApi(record.RoomID);
                  success('删除成功');
                  reload();
                },
              },
            },
          ]),
      },
    });

    const [registerModal, { openModal }] = useModal();

    const tableTopAction = createTableAction(
      [
        {
          label: '新增自习室',
          icon: 'ant-design:plus-outlined',
          onClick: () => openModal(true, { type: 'add' }),
        },
      ],
      { type: 'top', outside: true },
    );
    return () => (
      <div>
        <BasicTable onRegister={registerTable} titleHelpMessage="管理所有自习室信息">
          {{
            headerTop: () => tableTopAction,
          }}
        </BasicTable>
        <ActionModal onRegister={registerModal} onReload={reload} />
      </div>
    );
  },
});
